<template>
  <el-dialog
    :model-value="visible"
    title="漏洞复核详情"
    width="900px"
    @update:model-value="handleUpdateVisible"
    @close="handleClose"
  >
    <div
      class="detail-content"
      v-loading="loading"
      style="height: 600px; overflow-y: auto"
    >
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-heading">📌 基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">漏洞编号:</span>
            <span class="info-value">{{ currentVuln?.cveId || "-" }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">漏洞名称:</span>
            <span class="info-value">{{ currentVuln?.name || "-" }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">严重程度:</span>
            <span class="info-value">
              <el-tag :type="getSeverityTagType(currentVuln?.severity)">
                {{ currentVuln?.severity || "-" }}
                <span v-if="currentVuln?.cvss"
                  >(CVSS: {{ currentVuln.cvss }})</span
                >
              </el-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">匹配度:</span>
            <span class="info-value">
              <div class="match-score">
                <span class="stars">{{
                  getStars(currentVuln?.matchScore || 0)
                }}</span>
                <span class="percent">{{ currentVuln?.matchScore || 0 }}%</span>
              </div>
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">匹配状态:</span>
            <span class="info-value">
              <el-tag :type="getStatusTagType(currentVuln?.verificationStatus)">
                {{ getVerificationStatusText(currentVuln?.verificationStatus) }}
              </el-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">是否可疑:</span>
            <span class="info-value">
              <el-tag :type="currentVuln?.isSuspect ? 'warning' : 'success'">
                {{ currentVuln?.isSuspect ? "是" : "否" }}
              </el-tag>
            </span>
          </div>
        </div>
      </div>

      <!-- 资产信息 -->
      <div class="detail-section" v-if="currentVuln?.assetInfo">
        <h3 class="section-heading">🖥️ 资产信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">IP地址:</span>
            <span class="info-value">{{
              currentVuln.assetInfo.ip || "-"
            }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">端口:</span>
            <span class="info-value">{{
              currentVuln.assetInfo.port || "-"
            }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">服务:</span>
            <span class="info-value">{{
              currentVuln.assetInfo.service || "-"
            }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">Banner:</span>
            <span class="info-value">{{
              currentVuln.assetInfo.banner || "-"
            }}</span>
          </div>
          <div class="info-item" v-if="currentVuln.assetInfo.products?.length">
            <span class="info-label">产品信息:</span>
            <span class="info-value">
              <el-tag
                v-for="(product, idx) in currentVuln.assetInfo.products"
                :key="idx"
                size="small"
                style="margin-right: 5px"
              >
                {{ product.name
                }}<span v-if="product.version"> {{ product.version }}</span>
              </el-tag>
            </span>
          </div>
          <div class="info-item" v-if="currentVuln.assetInfo.tags?.length">
            <span class="info-label">标签:</span>
            <span class="info-value">
              <el-tag
                v-for="(tag, idx) in currentVuln.assetInfo.tags"
                :key="idx"
                size="small"
                type="info"
                style="margin-right: 5px"
              >
                {{ tag }}
              </el-tag>
            </span>
          </div>
        </div>
      </div>

      <!-- 匹配关键词 -->
      <div class="detail-section" v-if="currentVuln?.matchKeywords">
        <h3 class="section-heading">🎯 匹配关键词</h3>
        <div class="keywords-container">
          <div
            class="keyword-group"
            v-if="currentVuln.matchKeywords.products?.length"
          >
            <span class="keyword-label">产品:</span>
            <el-tag
              v-for="(item, idx) in currentVuln.matchKeywords.products"
              :key="idx"
              size="small"
              style="margin: 2px 5px 2px 0"
            >
              {{ item }}
            </el-tag>
          </div>
          <div
            class="keyword-group"
            v-if="currentVuln.matchKeywords.services?.length"
          >
            <span class="keyword-label">服务:</span>
            <el-tag
              v-for="(item, idx) in currentVuln.matchKeywords.services"
              :key="idx"
              size="small"
              type="success"
              style="margin: 2px 5px 2px 0"
            >
              {{ item }}
            </el-tag>
          </div>
          <div
            class="keyword-group"
            v-if="currentVuln.matchKeywords.versions?.length"
          >
            <span class="keyword-label">版本:</span>
            <el-tag
              v-for="(item, idx) in currentVuln.matchKeywords.versions"
              :key="idx"
              size="small"
              type="warning"
              style="margin: 2px 5px 2px 0"
            >
              {{ item }}
            </el-tag>
          </div>
          <div
            class="keyword-group"
            v-if="currentVuln.matchKeywords.components?.length"
          >
            <span class="keyword-label">组件:</span>
            <el-tag
              v-for="(item, idx) in currentVuln.matchKeywords.components"
              :key="idx"
              size="small"
              type="info"
              style="margin: 2px 5px 2px 0"
            >
              {{ item }}
            </el-tag>
          </div>
          <div
            class="keyword-group"
            v-if="currentVuln.matchKeywords.vuln_types?.length"
          >
            <span class="keyword-label">漏洞类型:</span>
            <el-tag
              v-for="(item, idx) in currentVuln.matchKeywords.vuln_types"
              :key="idx"
              size="small"
              type="danger"
              style="margin: 2px 5px 2px 0"
            >
              {{ item }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 漏洞描述 -->
      <div class="detail-section" v-if="currentVuln?.description">
        <h3 class="section-heading">📝 漏洞描述</h3>
        <div class="description-content">
          {{ currentVuln.description }}
        </div>
      </div>

      <!-- 受影响产品 -->
      <div class="detail-section" v-if="currentVuln?.affectedProducts?.length">
        <h3 class="section-heading">📦 受影响产品</h3>
        <div class="affected-products">
          <el-tag
            v-for="(product, idx) in currentVuln.affectedProducts"
            :key="idx"
            size="small"
            style="margin: 3px 5px 3px 0"
          >
            {{ product }}
          </el-tag>
        </div>
      </div>

      <!-- 推荐POC -->
      <div class="detail-section" v-if="currentVuln?.recommendedPocs?.length">
        <h3 class="section-heading">🔧 推荐POC</h3>
        <div class="poc-list">
          <div
            v-for="(poc, idx) in currentVuln.recommendedPocs"
            :key="idx"
            class="poc-item"
          >
            <div class="poc-header">
              <span class="poc-name">{{ poc.poc_name }}</span>
              <el-tag
                size="small"
                :type="getPocStatusType(poc.execution_status)"
                style="margin-left: 10px"
              >
                {{ getPocStatusText(poc.execution_status) }}
              </el-tag>
            </div>
            <div class="poc-info">
              <span class="poc-label">推荐分数:</span>
              <span class="poc-value"
                >{{ (poc.recommendation_score * 100).toFixed(2) }}%</span
              >
              <span class="poc-label" style="margin-left: 15px">目标:</span>
              <span class="poc-value">{{ poc.target_url || "-" }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 复核历史 -->
      <div class="detail-section" v-if="currentVuln?.reviewHistory?.length">
        <h3 class="section-heading">📜 复核历史</h3>
        <div class="review-history-list">
          <div
            v-for="(review, idx) in currentVuln.reviewHistory"
            :key="idx"
            class="review-history-item"
          >
            <div class="review-history-header">
              <span class="review-decision">
                <el-tag
                  :type="getDecisionTagType(review.decision)"
                  size="small"
                >
                  {{ getDecisionText(review.decision) }}
                </el-tag>
              </span>
              <span class="review-time">{{ review.reviewed_at }}</span>
            </div>
            <div class="review-history-content">
              <div class="review-reviewer">
                <span class="review-label">复核人:</span>
                <span class="review-value">{{
                  review.reviewed_by || "-"
                }}</span>
              </div>
              <div class="review-comments" v-if="review.comments">
                <span class="review-label">备注:</span>
                <span class="review-value">{{ review.comments }}</span>
              </div>
              <div class="review-batch" v-if="review.batch_operation">
                <el-tag size="small" type="info">批量操作</el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 时间线 -->
      <div class="detail-section" v-if="currentVuln?.timeline?.length">
        <h3 class="section-heading">⏱️ 时间线</h3>
        <div class="timeline-container">
          <el-timeline>
            <el-timeline-item
              v-for="(item, idx) in currentVuln.timeline"
              :key="idx"
              :timestamp="item.time"
              placement="top"
            >
              <div class="timeline-content">
                <div class="timeline-event">{{ item.event }}</div>
                <div class="timeline-description">{{ item.description }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <!-- 扫描进度 -->
      <div v-if="showScanProgress" class="detail-section">
        <h3 class="section-heading">📊 扫描进度</h3>
        <div class="scan-progress">
          <el-progress :percentage="scanProgress" class="progress-bar" />
          <div class="progress-info">
            <span>状态: {{ scanStatus }}</span>
            <span>预计完成: {{ estimatedCompletion }}</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { ElTimeline, ElTimelineItem } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  currentVuln: {
    type: Object,
    default: () => null,
  },
  showScanProgress: {
    type: Boolean,
    default: false,
  },
  scanProgress: {
    type: Number,
    default: 0,
  },
  scanStatus: {
    type: String,
    default: "等待扫描...",
  },
  estimatedCompletion: {
    type: String,
    default: "",
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits<{
  close: [];
  "update:visible": [boolean];
}>();

// 辅助方法
const getStars = (score: number) => {
  const fullStars = Math.floor(score / 20);
  const halfStar = score % 20 >= 10 ? 1 : 0;
  const emptyStars = 5 - fullStars - halfStar;
  return "★".repeat(fullStars) + (halfStar ? "☆" : "") + "☆".repeat(emptyStars);
};

const getVerificationStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: "待复核",
    in_review: "复核中",
    approved: "已通过",
    rejected: "已驳回",
    ignored: "已忽略",
  };
  return map[status] || status || "未知";
};

const getStatusTagType = (
  status: string
): "success" | "warning" | "info" | "danger" => {
  const map: Record<string, "success" | "warning" | "info" | "danger"> = {
    pending: "danger",
    in_review: "warning",
    approved: "success",
    rejected: "info",
  };
  return map[status] || "info";
};

const getSeverityTagType = (
  severity: string
): "success" | "warning" | "info" | "danger" => {
  const map: Record<string, "success" | "warning" | "info" | "danger"> = {
    严重: "danger",
    高危: "warning",
    中危: "info",
    低危: "success",
  };
  return map[severity] || "info";
};

const getPocStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: "待执行",
    running: "执行中",
    completed: "已完成",
    failed: "失败",
  };
  return map[status] || status || "未知";
};

const getPocStatusType = (
  status: string
): "success" | "warning" | "info" | "danger" => {
  const map: Record<string, "success" | "warning" | "info" | "danger"> = {
    pending: "info",
    running: "warning",
    completed: "success",
    failed: "danger",
  };
  return map[status] || "info";
};

const getDecisionText = (decision: string) => {
  const map: Record<string, string> = {
    approved: "通过",
    rejected: "驳回",
    ignored: "忽略",
  };
  return map[decision] || decision;
};

const getDecisionTagType = (
  decision: string
): "success" | "warning" | "info" | "danger" => {
  const map: Record<string, "success" | "warning" | "info" | "danger"> = {
    approved: "success",
    rejected: "danger",
    ignored: "info",
  };
  return map[decision] || "info";
};

// 更新 visible 状态
const handleUpdateVisible = (value: boolean) => {
  emit("update:visible", value);
};

// 关闭弹窗
const handleClose = () => {
  emit("close");
};
</script>

<style scoped lang="scss">
.detail-content {
  padding: 10px 0;
}

.detail-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #eee;

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.section-heading {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 15px 0;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  min-height: 32px;
}

.info-label {
  width: 100px;
  color: #666;
  flex-shrink: 0;
  font-weight: 500;
}

.info-value {
  flex: 1;
  color: #333;
  word-break: break-word;
}

.match-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stars {
  color: #faad14;
}

.percent {
  color: #333;
  font-weight: 500;
}

.keywords-container {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.keyword-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &:last-child {
    margin-bottom: 0;
  }

  .keyword-label {
    width: 80px;
    color: #666;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 10px;
  }
}

.affected-products {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  min-height: 40px;
}

.poc-list {
  padding: 10px 0;
}

.poc-item {
  padding: 12px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-left: 3px solid #1890ff;

  &:last-child {
    margin-bottom: 0;
  }

  .poc-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .poc-name {
    font-weight: 500;
    color: #333;
  }

  .poc-info {
    font-size: 13px;
    color: #666;
  }

  .poc-label {
    color: #999;
    margin-right: 5px;
  }

  .poc-value {
    color: #333;
  }
}

.review-history-list {
  padding: 10px 0;
}

.review-history-item {
  padding: 12px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-left: 3px solid #1890ff;

  &:last-child {
    margin-bottom: 0;
  }

  .review-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .review-time {
    font-size: 12px;
    color: #999;
  }

  .review-history-content {
    font-size: 13px;
    color: #666;
  }

  .review-reviewer,
  .review-comments {
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
  }

  .review-label {
    width: 60px;
    color: #999;
    flex-shrink: 0;
    margin-right: 5px;
  }

  .review-value {
    flex: 1;
    color: #333;
  }

  .review-batch {
    margin-top: 5px;
  }
}

.timeline-container {
  padding: 10px 0;
}

.timeline-content {
  .timeline-event {
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
  }

  .timeline-description {
    font-size: 13px;
    color: #666;
  }
}

.description-content {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  line-height: 1.6;
  color: #333;
  min-height: 80px;
}

.scan-progress {
  padding: 10px 0;
}

.progress-bar {
  margin-bottom: 10px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
}
</style>
